<template>
  <body>
  <div class="background">
    <img src="static/background.jpg" width="100%" height="100%" alt=""/>
  </div>
  <el-page-header @back="goBack" content="充值信息" style="margin-top: -2%">
  </el-page-header>
  <div>
    <el-card class="card">
      <div>
        <el-select style="width: 50%;font-size: 18px" v-model="value" placeholder="请选择类型">
          <el-option
            style="width: 50%;font-size: 18px"
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button size="small" type="primary" icon="el-icon-search" @click="cf" style="font-size: 18px">搜索</el-button>
      </div>
      <div class="table" style="width: 100%;height: 100%;">
        <el-table
          style="background: hsla(0, 0%, 80%, .25) border-box;height: 588px;font-size: 18px"
          :data="recharges.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          border
          stripe
          height="600">
          <el-table-column
            v-for="info in rightHeader" :key="info.key"
            :property="info.key"
            :label="info.label"
          >
            <template slot-scope="scope">
              {{scope.row[scope.column.property]}}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row style="margin-top: 1%;margin-left: -1%">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="recharges.length"
          layout="total, prev, pager, next, jumper">
        </el-pagination>
      </el-row>
    </el-card>
  </div>
  </body>
</template>

<script>
  export default {
    data() {
      return {
        recharges: [
          {
            customerId: '',
            sumOM: '',
            date: ''
          },
        ],
        rightHeader: [
          {
            label: '用户名',
            key: 'customerId'
          },
          {
            label: '金额(元)',
            key: 'sumOM'
          },
          {
            label: '日期',
            key: 'date'
          }
        ],
        currentPage: 1,
        pageSize: 7,
        keywords: '',
        options: [{
          value: '1',
          label: '按天展示'
        }, {
          value: '2',
          label: '按月展示'
        }],
        value:'1',
      };
    },
    created() {
      this.load();
    },
    methods: {
      load(){
        this.$axios.post('/user/selectRechargeByD/'+this.$store.state.customerId)
          .then(resp => {
            if (resp.data.code == 200) {
              this.recharges = resp.data.data;
            }
          })
      },
      goBack() {
        this.$router.go(-1);
      },
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
      },
      cf(){
        let id=this.$store.state.customerId;
        let type=this.value;
        if(type==1){
          this.$axios.post('/user/selectRechargeByD/'+id)
          .then(resp=>{
            if(resp.data.code==200){
              this.recharges=resp.data.data;
            }
          })
        }
        if(type==2){
          this.$axios.post('/user/selectRechargeByY/'+id)
            .then(resp=>{
              if(resp.data.code==200){
                this.recharges=resp.data.data;
              }
            })
        }
      }
    }
  };
</script>

<style scoped>
  .background {
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    position: fixed;
  }

  .card {
    position: relative;
    width: 875px;
    margin-top: 2%;
    margin-left: 26.5%;
    padding: 1em;
    background: hsla(0, 0%, 50%, .25) border-box;
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset,
    0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
  }

  .table /deep/ .el-table th {
    background: hsla(0, 0%, 80%, .25) border-box;
    color: black;
  }

  .table /deep/ .el-table tr {
    background: hsla(0, 0%, 80%, .25) border-box;
    color: black;
  }
  .table /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
    background: hsla(0, 0%, 80%, .25) border-box;
    color: black;
  }

</style>
